<script>
import elementResizeDetectorMaker from 'element-resize-detector'
import { debounce } from 'lodash'
export default {
  props: {
    delay: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      width: 0,
      height: 0,
      observer: elementResizeDetectorMaker()
    }
  },
  methods: {
    handleChange: debounce(function(el) {
      const rect = el.getBoundingClientRect()
      this.width = rect.width
      this.height = rect.height
      this.$emit('change')
    }, 100),
    onChange() {
      this.handleChange(this.$el)
    }
  },
  mounted() {
    const el = this.$el
    this.observer.listenTo(el, this.handleChange.bind(this, el))
    if (this.delay > 0) {
      setTimeout(() => {
        this.handleChange(el)
      }, this.delay)
    }
  },
  render() {
    return (
      this.$scopedSlots.default &&
      this.$scopedSlots.default({
        width: this.width,
        height: this.height
      })
    )
  }
}
</script>
